<template>
	<uni-list>
		<uni-list-item
			v-for="item in list"
			:key="item.title"
			:title="item.title"
			clickable
			@click="goView(item.path)"
		>
			<template #header>
				<image class="item_icon" :src="item.icon" />
			</template>
			<template #footer>
				<uni-badge :text="item.count" />
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
import { countDjNotice } from '../../net/notice'
import { websock } from '../../net/websock';

const list = ref([
	{ title: '党费收缴', icon: '/static/notice/dfsjtz.png', path: './payment' },
	{ title: '党群活动通知', icon: '/static/notice/dqhdtz.png', path: './activities' },
	{ title: '理论测验', icon: '/static/notice/llcytz.png', path: './exam' },
	{ title: '绩效管理通知', icon: '/static/notice/jxgltz.png', path: './jixiao' },
	{ title: '科研管理通知', icon: '/static/notice/kygltz.png', path: './keyan' },
	{ title: '项目管理通知', icon: '/static/notice/xmgltz.png', path: './xiangmu' },
	{ title: '其他通知', icon: '/static/notice/other.png', path: './other' }
])
const goView = url => {
	uni.navigateTo({ url })
}
const getCount = async () => {
	const params = { status: 0 }
	const res = await countDjNotice(params)
	res.data.forEach(item => {
		list.value.forEach(v => {
			if (item.name === v.title) {
				v.count = item.count
			}
		})
	})
	let total = res.data.reduce((v, n) => {
		return v + (n.count || 0)
	}, 0)

	let cnt = await websock.getUnreadNotificationCnt()
	list.value[list.value.length - 1].count = cnt

	total += cnt

	if (total === 0) {
		uni.hideTabBarRedDot({ index: 0 })
	}
}

onLoad(() => {
	uni.$on('NOTIFICATION-CHANGE', getCount)
})

onUnload(() => {
	uni.$off('NOTIFICATION-CHANGE', getCount)
})

onShow(() => {
	getCount()
})
</script>

<style lang="scss">
.item_icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 40rpx;
	> :deep(div) {
		background-size: contain !important;
	}
}
:deep(.uni-list-item__content-title) {
	line-height: 60rpx;
	font-size: 16px;
}
.uni-badge--x {
	display: flex;
	align-items: center;
}
:deep(.uni-badge) {
	min-width: 60rpx;
	height: 40rpx;
	line-height: 36rpx;
	font-size: 28rpx;
}
</style>
